<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs :list="types" lineWidth="50" lineHeight="4" :activeStyle="activeStyle"
				:inactiveStyle="inactiveStyle" :itemStyle="itemStyle" @click="getLike">
			</u-tabs>
		</u-sticky>
		<view class="bizhi" v-show="curNow==0">
			<image :src="item.works.path" mode="aspectFill" @click="toDetail(item.id)" v-for="(item,index) in images"
				:key="index"></image>
		</view>
		<!-- 		<view class="group" v-show="curNow==1">
			<groups :worksGroup="groups"></groups>
		</view> -->
		<u-empty text="空的" :show="images.length==0" width="210" marginTop="300"
			icon="http://cdn.uviewui.com/uview/empty/data.png" textSize="24">
		</u-empty>
	</view>
</template>

<script>
	// import groups from "../../components/works/group.vue"
	export default {
		// components: {
		// 	groups
		// },
		data() {
			return {
				types: [{
					name: '壁纸'
				}], //[name:'壁纸', name:'专辑']
				curNow: 0,
				images: [],
				groups: [],
				page: 1,
				currentIndex: 0,
				activeStyle: {
					"font-size": "26rpx",
					color: '#303133',
					fontWeight: '600',
					transform: 'scale(1)'
				},
				itemStyle: {
					"font-size": "26rpx",
					"padding-left": "15px",
					"padding-right": "15px",
					"height": "34px"
				},
				inactiveStyle: {
					"font-size": "26rpx",
					color: '#606266',
				}
			};
		},
		onReachBottom() {
			if (this.images.length != 0) {
				this.status = 'loading';
				setTimeout(() => {
					this.page++
					this.getLike(0)
				}, 100)
			}
		},
		onLoad() {
			this.getLike(0)
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/works/show?id=' + id
				});
			},
			getLike(idx) {
				this.curNow = idx
				this.$api.getLike(idx + 1).then((res) => {
					if (idx == 0) {
						if (res.data.data.length == 0) {
							this.status = 'nomore';
						} else {
							this.images = [...this.images, ...res.data.data];
						}
					} else {
						this.groups = res.data.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-tabs__wrapper__nav__line {
		justify-content: center;
		left: 23rpx;
	}

	.bizhi {
		margin-top: 10rpx;
		padding-left: 15rpx;

		image {
			width: $uni-img-width;
			height: $uni-img-height;
			margin-right: 10rpx;
			// margin-top: 10rpx;
			border-radius: $uni-img-radius;
		}
	}

	.group {
		padding-left: 30rpx;

		image {
			width: $uni-img-headw;
			height: $uni-img-headh;
			margin-right: 20rpx;
			margin-top: 10rpx;
		}
	}
</style>
